<script setup>
import { ref, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'
import { updateApi } from '@/api/stocktaking/info'
// 假设后续会创建API文件
// import { addApi, updateApi } from '@/api/stocktaking/info'

const emit = defineEmits(['refresh'])

const dialogVisible = ref(false)
const isViewMode = ref(false)

const dialogFormData = ref({
  id: null,
  targetWarehouseId: null,
  targetWarehouseAreaId: null,
  targetWarehouseAreaLocaId: null,
  skuId: null,
  bookCount: null,
  correctCount: null,
  discrepancyCount: null,
  category: 1,
  status: 1,
  empId: null,
  stocktakingTaskId: null,
  saasId: null,
  createBy: null,
  updateBy: null,
  isDel: 1
})

// 类型选项
const categoryOptions = [
  { value: 1, label: '滚动盘点' },
  { value: 2, label: '定时盘点' }
]

// 状态选项
const statusOptions = [
  { value: 1, label: '未确认' },
  { value: 2, label: '已确认' },
  { value: 3, label: '已调整' }
]

// 表单验证规则
const rules = {
  targetWarehouseId: [
    { required: true, message: '请输入仓库ID', trigger: 'blur' }
  ],
  targetWarehouseAreaId: [
    { required: true, message: '请输入库区ID', trigger: 'blur' }
  ],
  targetWarehouseAreaLocaId: [
    { required: true, message: '请输入库位ID', trigger: 'blur' }
  ],
  skuId: [
    { required: true, message: '请输入规格ID', trigger: 'blur' }
  ],
  bookCount: [
    { required: true, message: '请输入账面数量', trigger: 'blur' }
  ],
  correctCount: [
    { required: true, message: '请输入盘点数量', trigger: 'blur' }
  ]
}

// 重置表单
const resetForm = () => {
  dialogVisible.value = false
  isViewMode.value = false
  dialogFormData.value = {
    id: null,
    targetWarehouseId: null,
    targetWarehouseAreaId: null,
    targetWarehouseAreaLocaId: null,
    skuId: null,
    bookCount: null,
    correctCount: null,
    discrepancyCount: null,
    category: 1,
    status: 1,
    empId: null,
    stocktakingTaskId: null,
    saasId: null,
    createBy: null,
    updateBy: null,
    isDel: 1
  }
}
const confirmData = ref({
  id: '',
  correctCount: '',
  discrepancyCount: ''
})
// 计算差异数量
const calculateDiscrepancy = () => {
  const bookCount = parseInt(dialogFormData.value.bookCount) || 0
  const correctCount = parseInt(dialogFormData.value.correctCount) || 0
  dialogFormData.value.discrepancyCount = correctCount - bookCount
}

// 确认提交
const confirm = async () => {
  // 这里应该使用 el-form 的 validate 方法，简化处理
  confirmData.value = {
    id: dialogFormData.value.id,
    correctCount: dialogFormData.value.bookCount,
    discrepancyCount: dialogFormData.value.correctCount
  }
  if (confirmData.value.bookCount === null ||
    confirmData.value.correctCount === null) {
    ElMessage.error('请填写必填项')
    return
  }
  let res = await updateApi(confirmData.value)
  if (res.code) {
    ElMessage.success('操作成功')
    resetForm()
    emit('refresh')
  } else {
    ElMessage.error('操作失败: ' + error.message)
  }
}

defineExpose({
  dialogVisible,
  dialogFormData,
  isViewMode,
  resetForm
})
</script>

<template>
  <el-dialog v-model="dialogVisible" :title="isViewMode ? '查看盘点信息' : (dialogFormData.id ? '编辑盘点信息' : '新增盘点信息')"
    width="600px" :close-on-click-modal="false">
    <el-form :model="dialogFormData" :rules="rules" label-width="120px" :disabled="isViewMode">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="账面数量" prop="bookCount">
            <el-input v-model.number="dialogFormData.bookCount" placeholder="请输入账面数量" @blur="calculateDiscrepancy"
              disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="盘点数量" prop="correctCount">
            <el-input v-model.number="dialogFormData.correctCount" placeholder="请输入盘点数量" @blur="calculateDiscrepancy" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm">取消</el-button>
        <el-button v-if="!isViewMode" type="primary" @click="confirm">
          确定
        </el-button>
        <el-button v-else type="primary" @click="resetForm">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>